<template>
    <div class="file-tiles-container">
        <!-- 使用el-row和el-col实现布局，模拟桌面的行列排列 -->
        <el-row :gutter="10">
            <el-col :span="4">
                <div class="file-tile" style="position: relative;" @click="handleAddFile">
                    <el-icon :size="36">
                        <Plus/>
                    </el-icon>
                    <div class="file-info">
                        <p class="file-name"> 添加连接 </p>
                        <p class="file-type"> Add... </p>
                    </div>
                </div>
            </el-col>
            <el-col :span="4" v-for="(file, index) in fileList" :key="index">
                <div class="file-tile" style="position: relative;" @dblclick="openTab(file)">
                    <el-icon :size="36">
                        <!-- 根据文件类型设置不同图标，这里简单示例几种常见类型 -->
                        <Document v-if="file.type === 'document'"/>
                        <Picture v-if="file.type === 'image'"/>
                        <Folder v-if="file.type === 'folder'"/>
                        <Plus v-if="file.type === 'add'"/>
                    </el-icon>
                    <div class="file-info">
                        <p class="file-name">{{ file.name }}</p>
                        <p class="file-type">{{ file.url }}</p>
                    </div>
                    <div class="file-actions">
                        <el-icon class="action-icon" @click="handleEditFile(file)" title="编辑">
                            <Edit/>
                        </el-icon>
                        <el-icon class="action-icon" @click="handleDeleteFile(file)" title="删除">
                            <Delete/>
                        </el-icon>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog
            title="添加 ETCD 连接信息"
            v-model="formVisible"
            width="500"
        >
            <el-form ref="formRef" :model="formData" :rules="formRules">
                <el-form-item label="名称" prop="name">
                    <el-input :disabled="formData.nameReadOnly" v-model="formData.name"
                              placeholder="请保证名称唯一, 否则会覆盖同名的链接信息"/>
                </el-form-item>
                <el-form-item label="URL" prop="url">
                    <el-input v-model="formData.url" placeholder="示例 http://192.168.0.1:8080"/>
                </el-form-item>
                <el-form-item v-if="false" label="版本" prop="version">
                    <el-select v-model="formData.version" placeholder="请选择版本">
                        <el-option label="v2" value="v2"></el-option>
                        <el-option label="v3" value="v3"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <el-button @click="testConnection">测试连接</el-button>
                    </div>
                    <div>
                        <el-button @click="formVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmDialog">确定</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Delete, Document, Edit, Folder, Picture, Plus} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus'
import {cluster_version} from "@/api/etcd2.js"
import {useConnectionStore} from '@/store/etcd.store.js';
const connectionStore = useConnectionStore();

const fileList = ref([
    {
        name: 'tab1',
        type: 'document',
        url: 'document',
        version: 'v2'
    },
    {
        name: 'tab2',
        type: 'image',
        url: 'document',
        version: 'v2'
    },
    {
        name: 'tab3',
        type: 'folder',
        url: 'document',
        version: 'v2'
    }
])

// 新增逻辑
const formVisible = ref(false)
const formRef = ref(null)
const formData = ref({
    name: '',
    nameReadOnly: false,
    url: '',
    version: 'v2'
})

const validateConnection = (rule, value, callback) => {
    // 这里可以添加测试连接的逻辑
    let url = formData.value.url;
    cluster_version(url).then(res => {
        callback();
    }).catch(error => {
        callback(new Error('etcd2 connect fail'));
    })
};
const formRules = ref({
    name: [
        {required: true, message: 'Please input connection name', trigger: 'blur'},
        {min: 3, message: 'Length should be greater than 3', trigger: 'blur'},
    ],
    url: [
        {required: true, message: 'Please input connection name', trigger: 'blur'},
        {min: 3, message: 'Length should be greater than 3', trigger: 'blur'},
        // { validator: validateConnection, trigger: 'blur'}
    ],
})


function handleAddFile() {
    // 这里添加添加文件的逻辑，比如弹出文件选择对话框等，目前先简单打印提示
    formVisible.value = true
    formData.value.name = '';
    formData.value.nameReadOnly = false;
    formData.value.url = 'http://127.0.0.1:2379';
    console.log("执行添加文件操作");
}

function testConnection() {
    // 这里可以添加测试连接的逻辑
    let url = formData.value.url;
    cluster_version(url).then(res => {
        ElMessage.success('Connect success')
    }).catch(error => {
        ElMessage.error(error)
    })
    console.log('测试连接按钮点击');
}

function confirmDialog() {
    // 表单校验
    formRef.value.validate((valid) => {
        if (valid) {
            // 关闭弹框
            formVisible.value = false;
            // 执行新增逻辑
            let file = {};
            file.name = formData.value.name;
            file.type = 'document';
            file.url = formData.value.url;
            file.version = "xx";
            connectionStore.put(file);
            // 重新查询
            search();
        }
    });
}

function handleEditFile(file) {
    // 这里添加编辑文件的逻辑，比如弹出编辑对话框等，目前先简单打印提示
    formVisible.value = true
    formData.value.name = file.name;
    formData.value.nameReadOnly = true;
    formData.value.url = file.url;
    console.log("执行添加文件操作");
}

function handleDeleteFile(file) {
    connectionStore.remove(file);
    search();
}

// 双击逻辑
const emit = defineEmits(['open-tab']);
const openTab = (file) => {
    emit('open-tab', file);
    console.log('double click', file)
};

// 默认从 local repository 加载配置信息
function search() {
    fileList.value = connectionStore.connections;
}

onMounted(() => {
    search();
})
</script>

<style scoped>
.file-tiles-container {
    padding: 10px;
}

.file-tile {
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.file-info {
    margin-top: 5px;
}

.file-name {
    font-weight: bold;
}

.file-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
}

.action-icon {
    cursor: pointer;
    font-size: 16px;
}
</style>